<template>
	<view class="flex-col page">
		<view>
			<view :style="{height:statusBarHeight+'px'}"></view>
			<u-navbar title="实名认证" bgColor="#F5F5F5" @leftClick="$nav(2)">	
			</u-navbar>
		</view>
		
		<view v-if="type == 1">
			<view class="flex-col items-center" style="margin-top: 80rpx;">
				<image src="/static/real_ing.png" style="width: 200rpx;height: 200rpx;"></image>
				<text style="color: #999;margin-top: 20rpx;">已实名认证</text>
			</view>
		</view>
		
		<view v-else class="flex-col">
			<view class="real-body">
				<view class="flex-row items-center" style="color: #999;margin-left: 30rpx;margin-top: 15rpx;margin-bottom: 5rpx;">
				    <view>手机号</view>
				    <view style="margin-left: 10rpx;">{{ mobile }}</view>
				</view>
				
				<view class="form_item">
					<u-input placeholder="请输入姓名" v-model="username" :clearable='false' type="text"
						placeholder-style='color: #a5a5a5;' border="bottom"/>
				</view>
				
				<view class="form_item">
					<u-input placeholder="请输入身份证号码" v-model="idCard" :clearable='false' type="idcard"
						placeholder-style='color: #a5a5a5;' border="bottom"/>
				</view>
			</view>
			
			<view class="sub_but" @click="submit">提交</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username:'',
				idCard:'',
				type:0
			};
		},
		computed:{
			statusBarHeight(){
				return this.$store.state.statusBarHeight + 44
			},
			mobile(){
				// console.log(this.$store.state.userInfo)
				return this.$store.state.userInfo.mobile;
				
			},
		},
		onLoad(op) {
			this.type = op.type;
		},
		methods:{
			submit(){
				if(!this.username){
					this.$u.toast('请输入姓名')
					return;
				}
				if(!this.idCard){
					this.$u.toast('请输入身份证号码')
					return;
				}
				this.$request({
					url:'?c=User&a=certification',
					type:'post',
					data:{
						id_card:this.idCard,
						real_name:this.username
					}
				}).then(res =>{
					uni.showToast({
						title:'提交成功'
					});
					setTimeout(() => {
						uni.navigateBack()
					}, 500);
				})
			}
		}
	}
</script>

<style lang="scss">
.page{
	width: 100%;
	height: 100vh;
	overflow-y: auto;
	overflow-x: hidden;
}
.real-body{
	background-color: #fff;
	margin: 20rpx;
	padding: 20rpx 20rpx 30rpx 20rpx;
	border-radius: 10rpx;
	display: flex;
	flex-direction: column;
}
.form_item {
	padding: 10rpx 15rpx;
	margin-top: 10rpx;
}
.sub_but {
	text-align: center;
	background-color: $u-primary;
	color: #fff;
	line-height: 80rpx;
	border-radius: 50rpx;
	margin-top: 50rpx;
	margin-left: 35rpx;
	margin-right: 35rpx;
}
</style>
